<template>
    <div>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-row :gutter="24">
                <el-col :span="12" :offset="0">
                    <el-form-item label="出库类型">
                        <el-input v-model="ruleForm.outType" :disabled="isDisabled" :readonly="isReadOnly" />
                        <!-- <p>接收到的值为：{{ ruleForm.outType }}</p> -->
                    </el-form-item>
                    <el-form-item label="出库单号" prop="outNum">
                        <el-input v-model="ruleForm.outNum" :readonly="isReadOnly" :disabled="isDisabled" />
                        <el-checkbox v-model="systemNumberChecked" @change="generateSystemNumber" name="type"
                            :disabled="isDisabled">系统编号</el-checkbox>
                    </el-form-item>
                    <el-form-item label="出库主题" prop="outTopic">
                        <el-input v-model="ruleForm.outTopic" />
                    </el-form-item>
                    <el-form-item label="出库日期">
                        <el-form-item prop="outDate">
                            <el-date-picker v-model="ruleForm.outDate" type="date" placeholder="Pick a Date"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="出库仓库" prop="Warehouse">
                        <el-cascader v-model="Warehouse" :options="warehousesOptions"
                            :props="{ value: 'label', label: 'label', children: 'children' }" @change="getOutList"
                            clearable filterable placeholder="请选择仓库" />
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="ruleForm.remark" type="textarea" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">

                    <el-form-item label="领料人员" prop="applicant">
                        <el-input v-model="ruleForm.applicant" />
                    </el-form-item>
                    <el-form-item label="出库人员" prop="outName">
                        <el-input v-model="ruleForm.outName" />
                    </el-form-item>
                    <el-form-item label="出库数量" prop="outCount">
                        <el-input v-model="ruleForm.outCount" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    修改
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import axios from "axios";
import { ElCascader, ElMessage } from "element-plus";
//引用路由
import { useRouter, useRoute } from "vue-router";
import { formatDate } from "../outtabs(库存管理)/filter.js"
const isDisabled = ref(true);
const router = useRouter();
interface RuleForm {
    OutId: number;
    outType: string;
    outNum: string;
    outTopic: string;
    outDate: string;
    outWareHouse: string;
    applicant: string;
    outName: string;
    remark: string;
    outCount: number;
}
//控制输入框只读状态的变量
const isReadOnly = ref(true)
const route = useRoute();
const Warehouse = ref([]);
const warehousesOptions = ref([]);
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
    OutId:"",
    outType: "",
    outNum: "",
    outTopic: "",
    outDate: "",
    outWareHouse: "",
    applicant: "",
    outName: "",
    remark: "",
    outCount: "",
});

const rules = reactive<FormRules<RuleForm>>({
    outType: [
        { required: true, message: '请输入出库类型', trigger: 'blur' },
    ],
    outNum: [
        { required: true, message: '请输入出库单号', trigger: 'blur' },
    ],
    outTopic: [
        { required: true, message: '请输入出库主题', trigger: 'blur' },
    ],
    outDate: [
        { required: true, message: '请输入出库日期', trigger: 'blur' },
    ],
    outWareHouse: [
        { required: true, message: '请输入出库仓库', trigger: 'change' },
    ],
    applicant: [
        { required: true, message: '请输入领料人员', trigger: 'blur' },
    ],
    outName: [
        { required: true, message: '请输入出库人员', trigger: 'blur' },
    ],
    remark: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ],
    outCount: [
        { required: true, message: '请输入出库数量', trigger: 'blur' }, { pattern: /^[1-9]\d*$/, message: "日产量必须为正整数" }
    ],
});


//获取要编辑的出库信息
const getOutInfo = () => {
    const outId = route.query.OutId;
    axios.get(`OutWareHouse/GetOutTabById?outId=${outId}`).then(res => {
        const outInfo = res.data;
        ruleForm.OutId = outInfo.OutId;// 将主键ID存储到ruleForm中
        ruleForm.outType = outInfo.OutType;
        ruleForm.outNum = outInfo.OutNum;
        ruleForm.outTopic = outInfo.OutTopic;
        ruleForm.outDate = outInfo.OutDate;
        Warehouse.value = outInfo.OutWareHouse.split(',');
        ruleForm.applicant = outInfo.Applicant;
        ruleForm.outName = outInfo.OutName;
        ruleForm.remark = outInfo.Remark;
        ruleForm.outCount = outInfo.OutCount;
    })
}
const submitForm = async (formEl: FormInstance | undefined) => {

    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.outWareHouse = Warehouse.value.toString();
            axios
                .put("OutWareHouse/UpdOutInfoById", ruleForm)
                .then((res) => {
                    console.log(res.data)
                    if (res.data > 0) {
                        ElMessage.success("修改成功");
                        router.push("/UserList/outshow");
                    } else {
                        ElMessage.error("修改失败");
                    }
                });
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
// 调用后端接口获取仓库树形图数据
const getOutList = () => {
    // 在此处调用后端接口获取仓库树形图数据，将返回的数据赋值给 warehouses
    axios.get('OutWareHouse/GetWarehousesList?pid=0').then(res => {
        //console.log(res.data)
        warehousesOptions.value = res.data;
    });
};
getOutInfo();
getOutList();
</script>
